<template>
  <div class="side-bar" style="width: 100%">
    <!-- 常规菜单 -->
    <!-- <a-menu
      mode="inline"
      theme="dark"
      :inline-collapsed="state.collapsed"
      :items="items">
    </a-menu> -->

    <!-- 递归菜单 -->
    <a-menu
      :inline-collapsed="state.collapsed"
      v-model:selectedKeys="state.selectedKeys"
      theme="dark"
      mode="inline">
      <menu-tree
        :menuList="items"
        @menuClick="menuClick" >
      </menu-tree>
    </a-menu>


  </div>
</template>

<script setup>
import { reactive, watch, h,computed } from 'vue';
import { useRouter } from 'vue-router';
import menuTree from './menuTree.vue';
import {useStore} from '../stores/index';
const store  = useStore();

const router = useRouter();

// 菜单栏状态
const state = reactive({
  collapsed: computed(()=>{
    return store.menuStatus
  }),
  selectedKeys:['home']
});

// 菜单数据
let authBox = reactive(['home','detail'])
const items = reactive(
  [
    {
      icon: 'ri-book-mark-fill',
      label: '服务记录',
      title: '服务记录',
      auth: 'home',
      key: 'home',
    },

  ]
);

let menuClick=(item)=>{
  router.push(item.path);
}

</script>

<style scoped>
  .side-bar {
    height: calc(100vh - 75px);
    overflow-y: auto;
  }

</style>